<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input
        type="text"
        placeholder="enter the name you search"
        v-model="msg"
      />&nbsp;<button @click="handler">Search</button>
    </div>
  </section>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      //收集表单元素文本框的内容---v-model
      msg: "",
    };
  },
  methods: {
    //按钮的点击事件
    handler() {
      //如果用户输入文本内容为空的,后面语句不应该执行[应为名字不能是空的]
      if (this.msg.trim() == "") return;
      //触发事件:keyword事件，将文本框内容传递给自动组件
      this.$bus.$emit("keyword", this.msg);
      //清空文本框的内容
      this.msg = "";
    },
  },
};
</script>

<style scoped>
</style>
